<script setup>
import * as echarts from "echarts";
// 原始数据（保持对应关系）'农学', '医学', '军事',
//'文学', '天文地理', '数学', '综合'
const originalData = [
  { 
    label: "医学", 
    value: 317,
    detail: ["张仲景-东汉《伤寒论》", "华佗-麻沸散开创外科", "孙思邈-唐代《千金方》", "李时珍-明代《本草纲目》", "皇甫谧-晋代《针灸甲乙经》", "葛洪-东晋《肘后备急方》", "巢元方-隋代《诸病源候论》", "王惟一-宋代针灸铜人"]
  },
  {
    label: "军事", 
    value: 268,
    detail: ["墨子-战国云梯与城防术", "鲁班-春秋攻城器械", "孙武-春秋《孙子兵法》", "戚继光-明代狼筅与车阵", "李靖-唐代六花阵", "沈括-北宋弓弩机括研究", "赵士祯-明代火箭载具", "茅元仪-明末《武备志》"]
  },
  { 
    label: "农学", 
    value: 243,
    detail: ["氾胜之-西汉区田法", "贾思勰-北魏《齐民要术》", "王祯-元代转轮排字盘", "徐光启-明代《农政全书》", "陈旉-南宋《农书》", "李冰-战国都江堰", "郭守敬-元代通惠河", "徐贞明-明代京畿水田"]
  },
  {
    label: "综合", 
    value: 195,
    detail: ["沈括-北宋《梦溪笔谈》", "宋应星-明末《天工开物》", "方以智-明末《物理小识》", "徐霞客-地理考察笔记60万字", "李之藻-《天学初函》编译", "阮元-清代《畴人传》", "戴震-《四库》科技典籍校勘"]
  },
  {
    label: "数学", 
    value: 182,
    detail: ["商高-西周勾股定理", "刘徽-魏晋割圆术", "祖冲之-南朝圆周率", "秦九韶-南宋大衍术", "李冶-金代天元术", "朱世杰-元代四元术", "梅文鼎-清代《数理精蕴》", "明安图-清代割圆连比例"]
  },
  {
    label: "天文地理", 
    value: 168,
    detail: ["甘德-战国星表", "张衡-东汉浑天仪", "郭守敬-元代简仪", "苏颂-北宋水运仪象台", "徐光启-《崇祯历书》", "梅文鼎-历算考证86种", "郦道元-北魏《水经注》", "裴秀-西晋制图六体"]
  },
  {
    label: "工程技术", 
    value: 153,
    detail: ["宇文恺-隋代大兴城", "李春-隋代赵州桥", "李诫-宋代《营造法式》", "綦毋怀文-灌钢法", "朱载堉-十二平均律计算", "宋应星-《天工开物》冶铸", "雷发达-清代宫廷建筑", "唐顺之-明代珠算体系"]
  }
];


// 创建排序后的数据集（深拷贝避免污染原始数据）
const sortedData = JSON.parse(JSON.stringify(originalData)).sort(
  (a, b) => b.value - a.value
); // 降序排序

// 配置图表选项
const option = {
  title: {
    text: "各领域科学家数量",
    left: "center",
    top: 10,
    textStyle: {
      color: "#000",
    },
  },
  tooltip: {
    trigger: "item",
    formatter: "{b}领域 : {c}人", // 显示格式：标签 + 数值
  },
  xAxis: {
    name: "领域",
    type: "category",
    axisLabel: {
      interval: 0, // 显示所有标签
      // rotate: 30, // 标签旋转30度防止重叠
      fontSize: 12,
    },
    data: sortedData.map((item) => item.label), // 使用排序后的标签
  },
  yAxis: {
    name: "数量",
    type: "value",
    scale: true, // 让x轴数据从最低开始不是0
    // axisLabel: {
    //   formatter: '{value}' // 保持数值格式
    // }
  },
  series: [
    {
      type: "bar",
      data: sortedData.map((item) => item.value), // 使用排序后的数据
      barWidth: "60%", // 调整柱宽
      itemStyle: {
        borderRadius: [5, 5, 0, 0], // 顶部圆角
        color: (params) => {
          // 为每个柱子定义不同的渐变色
          const colors = [
            // { start:  "#D7AFAD", end:  "#D7AFAD", },
            // { start:  "#D3DFED", end:  "#D3DFED", },
            // { start:  "#E5CDDD", end:  "#E5CDDD", },
            // { start:  "#C7BED3", end:  "#C7BED3", },
            // { start:  "#E4E1C2", end:  "#E4E1C2", },
            // { start:  "#738BAD", end:  "#738BAD", },
            // { start:  "#85A397", end:  "#85A397", },

            { start: "#738BAD", end: "#738BAD" },
            { start: "#738BAD", end: "#738BAD" },
            { start: "#738BAD", end: "#738BAD" },
            { start: "#738BAD", end: "#738BAD" },
            { start: "#738BAD", end: "#738BAD" },
            { start: "#738BAD", end: "#738BAD" },
            { start: "#738BAD", end: "#738BAD" },
          ];
          return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: colors[params.dataIndex].start },
            { offset: 1, color: colors[params.dataIndex].end },
          ]);
        },
      },
      // ===== 柱顶数值显示 =====
      label: {
        show: true,
        position: "top",
        color: "#738BAD",
        fontWeight: "bold",
      },
    },
  ],
  // ===== 图表布局调整 =====
  grid: {
    containLabel: true,
    left: "3%",
    right: "10%",
    bottom: "10%", // 为x轴标签留出空间
  },
};
</script>

<template>
  <!-- 科学家页面的柱状图 -->
  <ECharts class="chart" :option="option" autoresize />
</template>

<style lang="scss" scoped>
.chart {
  width: 100%;
  height: 100%;
}
</style>
